<template>
	<view class="login-wrap">
		<u-navbar back-icon-name="close" title="登陆"></u-navbar>
		<view class="logo">
			<u-image width="100%" height="100%" src="/static/img/logo.png" shape="circle">
			</u-image>
			</view>
		<view 
			class="phone_login animate__animated" 
			hover-class="animate__fadeIn" 
			@click="toPhoneLogin"
			>
			<text>手机号登陆</text>
		</view>
		<view 
			class="phone_register animate__animated" 
			hover-class="animate__fadeIn">
			<text>注册</text>
		</view>

		<view 
			class="other_login animate__animated" 
			hover-class="animate__fadeIn">
			<text>其他登陆方式</text>
		</view>
		<view class="login_type">
			<view class="weixin animate__animated" hover-class="animate__fadeIn">
				<view class="icon"><u-image width="44px" height="44px" src="/static/img/weixin.png" mode="aspectFit"></u-image></view>
				<text class="tyep_text">微信</text>
			</view>
			<view class="qq animate__animated" hover-class="animate__fadeIn">
				<view class="icon"><u-image width="44px" height="44px" mode="aspectFit" src="/static/img/qq.png"></u-image></view>
				<text class="tyep_text">QQ</text>
			</view>
			<view class="weibo animate__animated" hover-class="animate__fadeIn">
				<view class="icon"><u-image width="44px" height="44px" mode="aspectFit" src="/static/img/weibo.png"></u-image></view>
				<text class="tyep_text">新浪微博</text>
			</view>
			<view class="wangyi animate__animated" hover-class="animate__fadeIn">
				<view class="icon"><u-image width="44px" height="44px" mode="aspectFit" src="/static/img/wangyi.png"></u-image></view>
				<text class="tyep_text">网易邮箱</text>
			</view>
		</view>
	</view>
</template>

<script>
import { GET_PERSONAL } from '../../api/model/login.js';
export default {
	data() {
		return {};
	},
	methods: {
		async toPhoneLogin() {
			// let res = await GET_PERSONAL();
			// console.log(res);
			uni.switchTab({
				url:"/pages/find/index"
			})
		}
	}
};
</script>

<style lang="scss">
.login-wrap {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	font-family: 'Microsoft YaHei';
}
.logo {
	height: 162.5rpx;
	width: 162.5rpx;
	margin-top: 114.58rpx;
}
.phone_login {
	background-color: $color-primary;
	width: 610.41rpx;
	line-height: 93.75rpx;
	margin-top: 133.33rpx;
	text-align: center;
	font-size: 31.25rpx;
	color: #fff;
	border-radius: $border-radius-normal;
}
.phone_register {
	@extend .phone_login;
	background-color: #fff;
	color: black;
	border: 1px solid #ccc;
	margin-top: 47.91rpx;
}
.other_login {
	margin-top: 195.83rpx;
	font-size: 29.16rpx;
	color: rgba(80, 80, 80, 1);
	width: 206.25rpx;
	line-height: 112.5rpx;
	text-align: center;
}
.login_type {
	margin-top: 31.25rpx;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	.weixin {
		height: 150rpx;
		width: 141.66rpx;
		margin-left: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tyep_text {
			line-height: 28px;
		}
	}
	.qq {
		@extend .weixin;
		margin-left: 31.25rpx;
		color: rgb(18, 150, 219);
	}
	.weibo {
		@extend .weixin;
		margin-left: 31.25rpx;
	}
	.wangyi {
		@extend .weixin;
		margin-left: 31.25rpx;
	}
}
</style>
